//1.导入路由包，得到 createBrowserRouter 函数
import { ErrorBlock } from "antd-mobile";
import { createBrowserRouter, Link } from "react-router-dom";

//懒加载 抽离 Home 组件
const lazyHome = async () => {
  const { default: Home, loader } = await import("../pages/tabs/Home");
  return {
    element: <Home />,
    loader,
  };
};

//2.  调用createBrowserRouter 函数创建路由对象
//2.1 传入一个参数 是路由的数组
//2.2 路由的数组中  包含许多个路由的配置对象 { path : '/' , element : 组件}
const route = createBrowserRouter(
  [
    //路由配置
    {
      path: "/",
      // element: <App />,
      //懒加载
      async lazy() {
        //使用 import（）函数懒加载对应的组件
        const { default: App } = await import("../App.jsx");
        return {
          element: <App />,
        };
      },
      children: [
        //重定向,索引路由
        {
          index: true,
          lazy: lazyHome,
        },
        //子路由
        {
          path: "home",
          lazy: lazyHome,
        },
        {
          path: "order-list",
          async lazy() {
            const { default: OrderList } = await import(
              "../pages/tabs/Order-List"
            );
            return {
              element: <OrderList />,
            };
          },
        },
        {
          path: "me",
          async lazy() {
            //使用 import（）函数懒加载对应的组件
            const { default: Me } = await import("../pages/tabs/Me");
            return {
              element: <Me />,
            };
          },
        },
      ],
    },
    //登录
    {
      path: "/login",
      async lazy() {
        const { default: Login } = await import("../pages/auth/login.jsx");
        return {
          element: <Login />,
        };
      },
    },
    //注册
    {
      path: "/reg",
      async lazy() {
        const { default: Reg } = await import("../pages/auth/reg.jsx");
        return {
          element: <Reg />,
        };
      },
    },
    //城市选择
    {
      path: "/city/:type",
      async lazy() {
        const { default: City, loader } = await import("../pages/city");
        return {
          element: <City />,
          loader,
        };
      },
    },
    //车次选择
    {
      path: "/train",
      async lazy() {
        const { default: List, loader } = await import(
          "../pages/train/List.jsx"
        );
        return {
          element: <List />,
          loader,
        };
      },
    },
    //车次详情
    {
      path: "/detail/:id",
      async lazy() {
        const { default: Detail, loader } = await import(
          "../pages/train/Detail.jsx"
        );
        return {
          element: <Detail />,
          loader,
        };
      },
    },
    //订单
    {
      path: "/order",
      async lazy() {
        const { default: Order, loader } = await import("../pages/order");
        return {
          element: <Order />,
          loader,
        };
      },
    },
    //支付
    {
      path: "/pays",
      async lazy() {
        const { default: Pays } = await import("../pages/pay");
        return {
          element: <Pays />,
        };
      },
    },
    //支付订单
    {
      path: "/pay/result",
      async lazy() {
        const { default: PayResult, loader } = await import(
          "../pages/payResult"
        );
        return {
          element: <PayResult />,
          loader,
        };
      },
    },
    //聊天
    {
      path: "/chat",
      async lazy() {
        const { default: Chat } = await import("../pages/tabs/Chat");
        return {
          element: <Chat />,
        };
      },
    },
    //乘客信息
    {
      path: "/psg",
      async lazy() {
        const { default: Psg, loader } = await import("../pages/pessengers");
        return {
          element: <Psg />,
          loader,
        };
      },
    },
    {
      path: "/add",
      async lazy() {
        const { default: Add, loader } = await import(
          "../pages/pessengers/Add.jsx"
        );
        return {
          element: <Add />,
          loader,
        };
      },
    },
    //404报错页面 路由
    {
      path: "*",
      element: <ErrorBlock fullPage description={<Link to="/">去首页</Link>} />,
    },
  ],
  {
    future: {
      v7_relativeSplatPath: true,
    },
  }
);

export default route;
